<template>
	<view class="container">
		<image class="icon" src="/static/supermarket/icon_success.png" mode="aspectFit"></image>
		<view class="title">支付成功</view>
		<view class="tag">请到个人中心我的订单中查询</view>
		<button class="toOrder" type="default" @click="toOrder()">查看订单</button>
		<view class="goBack" @click="toIndex()">返回首页</view>
		<!-- <uni-popup ref="popup" type="center">
			<view class="popup-tips">
				<view class="head">
					<view class="popup-title">商品取送提示</view>
					<image class="icon-close" @click="closePopup" src="/static/supermarket/icon_close2.png" mode="aspectFit"></image>
				</view>
				<view class="line"></view>
				<view class="main" v-if="type==1">
					<view class="content">支付成功，请及时前往该店铺进行自取！</view>
					<view class="address" style="margin-top: 36rpx;">店铺地址：</view>
					<view class="address">{{address}}</view>
				</view>
				<view class="main" v-if="type==2">
					<view class="content">支付成功，请及时前往跑腿大厅发布跑腿订单！</view>
					<button class="btn" type="default" @click="toPage()">前往跑腿大厅</button>
				</view>
			</view>
		</uni-popup> -->
	</view>
</template>

<script>
	var app = getApp();
	import Vue from 'vue'
	export default {
		components: {
			
		},
		data() {
			return {
				id: 0,
				showPopup: true,
				type: 0,
				address: ''
			}
		},
		onLoad(option) {
			this.id = option.id
			this.type = option.type
			this.address = option.address
		},
		onReady() {
			this.$refs.popup.open() 
		},
		methods: {
			// 返回首页
			toIndex() {
				uni.reLaunch({
					url: "/pages/Component/supermarket/Program/index/index"
				})
			},
			// 跳转订单详情
			toOrder() {
				var pages = getCurrentPages()
				if(pages[pages.length - 2].route == "pages/Component/supermarket/Program/order/details") {
					uni.navigateBack()
					return
				}
				uni.navigateTo({
					url: "/pages/Component/supermarket/Program/order/details?id="+this.id
				})
			},
			// 前往跑腿大厅
			toPage() {
				uni.navigateTo({
					url: "/pages/Component/Module/Campus/Program/Runerrands/index/index?type=1"
				})
			},
			// 关闭弹窗
			closePopup() {
				this.$refs.popup.close()
			}
		}
	}
</script>

<style lang="scss">
	.container {
		.icon {
			width: 180rpx;
			height: 180rpx;
			display: block;
			margin: 35% auto 0;
		}
		
		.title {
			font-weight: 400;
			font-size: 33rpx;
			line-height: 45rpx;
			margin: 15rpx 0;
			text-align: center;
		}
		
		.tag {
			font-weight: 400;
			font-size: 25rpx;
			line-height: 36rpx;
			color: #979797;
			text-align: center;
		}
	
		.toOrder {
			background: linear-gradient(90.8deg, #ffb62f 2.59%, #fdb585 100%);
			border-radius: 100rpx;
			width: 92%;
			font-weight: 400;
			font-size: 25rpx;
			line-height: 36rpx;
			color: #FFFFFF;
			padding: 20rpx;
			margin-top: 58rpx;
		}
		
		.goBack {
			font-weight: 400;
			font-size: 25rpx;
			line-height: 36rpx;
			color: #979797;
			margin-top: 29rpx;
			text-align: center;
		}
	
		.popup-tips {
			background: #fff;
			width: 580rpx;
			max-width: 95%;
			border-radius: 36rpx;
			
			.head {
				position: relative;
				padding: 22rpx;
				border-bottom: 1rpx solid rgba($color: #000, $alpha: 0.1);
				
				.popup-title {
					font-weight: 400;
					font-size: 33rpx;
					line-height: 45rpx;
					text-align: center;
					color: #333333;
				}
				
				.icon-close {
					width: 36rpx;
					height: 36rpx;
					position: absolute;
					right: 22rpx;
					top: 50%;
					transform: translateY(-50%);
				}
			}
			
			.main {
				padding: 44rpx 64rpx 58rpx;
				
				.content {
					font-weight: 400;
					font-size: 29rpx;
					line-height: 44rpx;
					color: #979797;
				}
				
				.address {
					font-weight: 400;
					font-size: 29rpx;
					line-height: 44rpx;
					color: #FB7A26;
				}
			
				.btn {
					width: 92%;
					padding: 14rpx;
					box-sizing: border-box;
					background: #FBC12D;
					border-radius: 33rpx;
					font-weight: 400;
					font-size: 29rpx;
					line-height: 40rpx;
					color: #FFFFFF;
					margin-top: 98rpx;
				}
			}
		}
	}
</style>
